<template>
  <div>
    <el-row type="flex" justify="center" :gutter="0">
      <el-col :span="2">
        <el-avatar :src="logo" fit="fill" :size="52" shape="square"
                   style="background-color:transparent; width: 100%;">hello
        </el-avatar>
      </el-col>
      <el-col :span="6">

        <nav>
          <el-row>
            <el-col :span="5">
              <router-link to="/">首页</router-link>

            </el-col>
            <!--            <el-col :span="8">-->
            <!--              <router-link to="/register">发帖</router-link>-->
            <!--            </el-col>-->
            <el-col :span="5">
              <router-link
                  :to="this.$store.state.user===undefined?'/login':`/userSpace?id=${this.$store.state.user===undefined?'':this.$store.state.user.id}`">
                我的
              </router-link>
            </el-col>
            <el-col v-if="this.$store.state.user!==undefined" :span="7">
              <router-link
                  v-if="this.$store.state.user.role==='admin'"
                  to="/userList">
                用户管理
              </router-link>
            </el-col>

          </el-row>
          <!--          <router-link to="/about">About</router-link> |-->
          <!--          <router-link to="/register">register</router-link> |-->
          <!--          <router-link to="/postSender">postSender</router-link> |-->
        </nav>

      </el-col>
      <el-col :span="6">
        <el-input @keyup.enter.na.native="doSearch" placeholder="请输入内容" v-model="query.search"
                  class="input-with-select mt10">
          <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button v-if="this.$store.state.user" round type="primary" class="mt10"
                   @click="$router.push({path:'/postSender'})">发帖
        </el-button>
        <el-button v-else round type="primary" class="mt10" @click="$router.push({path:'/login'})">登录</el-button>
      </el-col>

      <el-col v-if="this.$store.state.user===undefined" :span="1">
        <el-link type="primary" style="line-height: 62px;" href="/register">
          注册
        </el-link>
      </el-col>

      <el-col v-if="this.$store.state.user!==undefined" :span="1">

        <span style="line-height: 58px; cursor: pointer;" @click="logout">登出</span>

      </el-col>

      <el-col :span="3">
        <a @click="gotoUserSpace">
          <el-avatar fit="fill" :src="this.$store.state.user===undefined?'':this.imageURL+this.$store.state.user.avatar"
                     class="mt10 bd1" size="large">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-avatar>
        </a>
      </el-col>
    </el-row>
  </div>

  <!--    <div class="bar-icon">-->
  <!--      &lt;!&ndash;    哔呼&ndash;&gt;-->
  <!--      <el-avatar :src="logo" size="large" shape="square" style="background-color:#00000000;"></el-avatar>-->

  <!--      &lt;!&ndash;    <el-image :src="logo" ></el-image>&ndash;&gt;-->
  <!--    </div>-->
  <!--    <div class="bar-right">-->

  <!--    </div>-->
  <!--    <el-icon class="el-icon-message"/>-->
  <!--    <el-icon class="el-icon-notebook-1"/>-->

  <!--  </div>-->
</template>

<script>
import logo from '@/assets/bhubhu.png'
import avator from '@/assets/avator.jpg'
import service from "@/api";
import post from "@/api/post";
import user from "@/api/user";

export default {
  name: "TopBar",
  emits: [],
  data() {
    return {
      logo,
      avator: "/avator.jpg",
      imageURL: service.imageURL,
      "user_id": "",
      activeIndex: 0,
      query: {
        search: ""
      }
    }
  },
  created() {
    this.user_id = localStorage.getItem("user_id");

    // if (this.user_id === null) {
    //   this.user_id=2
    // }
  },
  methods: {
    gotoUserSpace() {

      this.$router.push({path: this.$store.state.user === undefined ? '/login' : `/userSpace?id=${this.$store.state.user === undefined ? '' : this.$store.state.user.id}`})
    },

    checkLogin() {
      if (this.$store.state.user === undefined) {
        this.$message.error("请登录");
        this.$router.push("/login");
      }
    },

    logout() {

      user.logout().then(res => {

        this.$store.dispatch("setUserInfoAsync", undefined);
        this.$router.push({path: '/login'})

      });
    },

    doSearch() {
      console.log(111)

      if (this.query) {
        let pager = this.$store.state.posts
        if (pager === undefined) {
          pager = {
            current: 1,
            size: 1,
            total: 1,
          }
        }
        post.getQueryPosts(pager.current, pager.size, pager.total, this.query.search).then(res => {
          // this.pager = res.data
          this.$store.dispatch("setPostsAsync", res.data)
          console.log(res.data)
        });
      }

      if (this.$route.path.indexOf("/home") > -1) {

      } else {
        this.$router.push({path: '/home?query=' + this.query.search})
      }


    }
  }
}
</script>

<style lang="scss" scoped>

.top-bar {
  width: 100%;
  height: 52px;
  display: flex;
  min-width: 1024px;
  background-color: #eee;

}

.mt10 {
  margin-top: 10px;
}

.bd1 {
  border: .3px solid rgba(0, 0, 0, 0.47);
}

nav {
  padding: 1px;


  a {
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;
    line-height: 53px;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
